<template>
  <div class="app-container">
    <!-- 查询 -->
    <div class="filter-container">
      <el-row :gutter="0">
        <el-col :xs="24" :sm="22">
          <el-select v-model="query.search_field" class="filter-item" style="width:110px;" placeholder="">
            <el-option value="member_id" label="会员ID" />
            <el-option value="username" label="账号" />
            <el-option value="nickname" label="昵称" />
            <el-option value="phone" label="手机" />
            <el-option value="email" label="邮箱" />
          </el-select>
          <el-input v-model="query.search_value" class="filter-item" style="width:200px;" placeholder="会员ID/账号/手机/邮箱" clearable />
          <el-select v-model="query.date_field" class="filter-item" style="width:110px;" placeholder="">
            <el-option value="create_time" label="注册时间" />
            <el-option value="login_time" label="登录时间" />
            <el-option value="update_time" label="修改时间" />
          </el-select>
          <el-date-picker
            v-model="query.date_value"
            type="daterange"
            class="filter-item"
            style="width:240px;"
            range-separator="-"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
          <el-button class="filter-item" type="primary" @click="search()">查询</el-button>
          <el-button class="filter-item" @click="refresh()">刷新</el-button>
        </el-col>
        <el-col :xs="24" :sm="2" style="text-align:right;">
          <el-button class="filter-item" type="primary" @click="add()">添加</el-button>
        </el-col>
      </el-row>
    </div>
    <!-- 列表 -->
    <el-table ref="table" v-loading="loading" :data="data" :height="height" style="width:100%" @sort-change="sort" @selection-change="select">
      <el-table-column type="selection" width="40" title="全选/反选" />
      <el-table-column prop="member_id" label="会员ID" min-width="100" sortable="custom" />
      <el-table-column prop="avatar_id" label="头像" min-width="80" align="center">
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.avatar_url"
            style="width:20px; height:20px; border-radius:3px;"
            :src="scope.row.avatar_url"
            :preview-src-list="[scope.row.avatar_url]"
            title="点击查看大图"
          />
        </template>
      </el-table-column>
      <el-table-column prop="username" label="账号" min-width="120" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="nickname" label="昵称" min-width="200" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="phone" label="手机" min-width="120" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="email" label="邮箱" min-width="220" sortable="custom" show-overflow-tooltip />
      <el-table-column prop="remark" label="备注" min-width="110" show-overflow-tooltip />
      <el-table-column prop="is_disable" label="禁用" min-width="80" sortable="custom" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.is_disable" :active-value="1" :inactive-value="0" @change="disable([scope.row])" />
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="80" sortable="custom" />
      <el-table-column prop="create_time" label="注册时间" min-width="160" sortable="custom" />
      <el-table-column label="操作" min-width="120" align="right" fixed="right">
        <template slot-scope="{ row }">
          <el-button size="mini" type="text" @click="edit(row)">修改</el-button>
          <el-button size="mini" type="text" @click="dele([row])">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 选中操作 -->
    <div style="margin-left:10px; margin-top:20px">
      <el-checkbox v-model="selectButton" style="padding-right:10px" title="全选/反选" @change="selectAll()" />
      <el-button size="mini" type="text" @click="selectOpen('region')">地区</el-button>
      <el-button size="mini" type="text" @click="selectOpen('disable')">禁用</el-button>
      <el-button size="mini" type="text" @click="selectOpen('repwd')">密码</el-button>
      <el-button size="mini" type="text" @click="dele(selection)">删除</el-button>
    </div>
    <el-dialog title="操作" :visible.sync="selectDialog">
      <el-form ref="selectRef" label-width="100px">
        <el-form-item v-if="selectType==='region'" label="地区" prop="">
          <el-cascader
            v-model="region_id"
            class="filter-item"
            :options="regionData"
            :props="regionProps"
            style="width:100%"
            clearable
            filterable
            placeholder="地区"
            @change="selectRegionChange"
          />
        </el-form-item>
        <el-form-item v-if="selectType==='disable'" label="禁用" prop="">
          <el-switch v-model="is_disable" style="margin-left: 10px;" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item v-if="selectType==='repwd'" label="新密码" prop="">
          <el-input v-model="password" placeholder="请输入新密码" clearable show-password />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selectCancel">取消</el-button>
        <el-button type="primary" @click="selectSubmit">提交</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <pagination v-show="count > 0" :total="count" :page.sync="query.page" :limit.sync="query.limit" @pagination="list" />
    <!-- 添加、修改 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialog" top="1vh" width="50%" :before-close="cancel">
      <el-form ref="ref" :model="model" :rules="rules" class="dialog-body" label-width="100px" :style="{height:height+'px'}">
        <el-form-item label="头像" prop="avatar_url">
          <el-col :span="8">
            <el-image
              v-if="model.avatar_url"
              style="width:100px; height:100px; border-radius:10px;"
              :src="model.avatar_url"
              :preview-src-list="[model.avatar_url]"
              title="点击查看大图"
            />
          </el-col>
          <el-col :span="16">
            <el-button size="mini" @click="fileUpload()">上传头像</el-button>
            <br>
            <span>jpg、png图片，小于100kb，宽高1:1</span>
          </el-col>
        </el-form-item>
        <el-form-item label="账号" prop="username">
          <el-input key="username" v-model="model.username" placeholder="请输入账号" clearable />
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input key="nickname" v-model="model.nickname" placeholder="请输入昵称" clearable />
        </el-form-item>
        <el-form-item v-if="model.member_id == ''" label="密码" prop="password">
          <el-input key="password" v-model="model.password" placeholder="请输入密码" clearable show-password />
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="model.phone" clearable />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="model.email" clearable />
        </el-form-item>
        <el-form-item label="地区" prop="region_id">
          <el-cascader v-model="model.region_id" :options="regionData" :props="regionProps" style="width:100%" @change="regionChange" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="model.remark" clearable />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="model.sort" type="number" />
        </el-form-item>
        <el-form-item v-if="model.member_id" label="注册时间" prop="create_time">
          <el-col :span="10">
            <el-input v-model="model.create_time" disabled />
          </el-col>
          <el-col class="line" :span="4" style="text-align:center">修改时间</el-col>
          <el-col :span="10">
            <el-input v-model="model.update_time" disabled />
          </el-col>
        </el-form-item>
        <el-form-item v-if="model.member_id" label="登录时间" prop="login_time">
          <el-col :span="10">
            <el-input v-model="model.login_time" disabled />
          </el-col>
          <el-col class="line" :span="4" style="text-align:center">登录地区</el-col>
          <el-col :span="10">
            <el-input v-model="model.login_region" disabled />
          </el-col>
        </el-form-item>
        <el-form-item v-if="model.wechat" label="微信信息" prop="wechat">
          <el-descriptions title="" :column="2">
            <el-descriptions-item label="头像">
              <el-image
                v-if="model.wechat.headimgurl"
                style="width:100px; height:100px; border-radius:10px;"
                :src="model.wechat.headimgurl"
                :preview-src-list="[model.wechat.headimgurl]"
                title="点击查看大图"
              />
            </el-descriptions-item>
            <el-descriptions-item label="昵称">{{ model.wechat.nickname }}</el-descriptions-item>
            <el-descriptions-item label="性别">
              <el-tag v-if="model.wechat.sex==0" type="info">未知</el-tag>
              <el-tag v-else-if="model.wechat.sex==1" type="info">男</el-tag>
              <el-tag v-else-if="model.wechat.sex==2" type="info">女</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="国家">{{ model.wechat.country }}</el-descriptions-item>
            <el-descriptions-item label="省份">{{ model.wechat.province }}</el-descriptions-item>
            <el-descriptions-item label="城市">{{ model.wechat.city }}</el-descriptions-item>
            <el-descriptions-item label="语言">{{ model.wechat.language }}</el-descriptions-item>
            <el-descriptions-item label="mwid">{{ model.wechat.member_wechat_id }}</el-descriptions-item>
            <el-descriptions-item label="openid">{{ model.wechat.openid }}</el-descriptions-item>
            <el-descriptions-item label="unionid">{{ model.wechat.unionid }}</el-descriptions-item>
          </el-descriptions>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
    </el-dialog>
    <!-- 上传头像 -->
    <el-dialog title="上传头像" :visible.sync="fileDialog" width="80%" top="1vh">
      <file-manage file-type="image" @fileCancel="fileCancel" @fileSubmit="fileSubmit" />
    </el-dialog>
  </div>
</template>

<script>
import screenHeight from '@/utils/screen-height'
import Pagination from '@/components/Pagination'
import FileManage from '@/components/FileManage'
import { list as regionList } from '@/api/region'
import { list, info, add, edit, dele, region, repwd, disable } from '@/api/member'

export default {
  name: 'Member',
  components: { Pagination, FileManage },
  data() {
    return {
      name: '会员',
      height: 680,
      loading: false,
      data: [],
      count: 0,
      query: {
        page: 1,
        limit: 15,
        search_field: 'member_id',
        date_field: 'create_time'
      },
      dialog: false,
      dialogTitle: '',
      model: {
        member_id: '',
        username: '',
        nickname: '',
        password: '',
        phone: '',
        email: '',
        region_id: '',
        avatar_id: 0,
        avatar_url: '',
        remark: '',
        sort: 250,
        wechat: {}
      },
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      regionData: [],
      regionProps: {
        expandTrigger: 'click',
        checkStrictly: true,
        value: 'region_id',
        label: 'region_name'
      },
      selection: [],
      selectButton: false,
      selectDialog: false,
      selectType: '',
      region_id: 0,
      is_disable: 0,
      password: '',
      fileDialog: false
    }
  },
  created() {
    this.height = screenHeight(280)
    this.list()
    this.regionList()
  },
  methods: {
    // 列表
    list() {
      this.loading = true
      list(this.query).then(res => {
        this.data = res.data.list
        this.count = res.data.count
        this.selectButton = false
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 添加、修改
    add() {
      this.dialog = true
      this.dialogTitle = this.name + '添加'
      this.reset()
    },
    edit(row) {
      this.dialog = true
      this.dialogTitle = this.name + '修改：' + row.member_id
      info({
        member_id: row.member_id
      }).then(res => {
        this.model = res.data
      })
    },
    cancel() {
      this.reset()
      this.dialog = false
    },
    submit() {
      this.$refs['ref'].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.model.member_id) {
            edit(this.model).then(res => {
              this.list()
              this.dialog = false
              this.$message.success(res.msg)
            }).catch(() => {
              this.loading = false
            })
          } else {
            add(this.model).then(res => {
              this.list()
              this.dialog = false
              this.$message.success(res.msg)
            }).catch(() => {
              this.loading = false
            })
          }
        }
      })
    },
    // 上传头像
    fileUpload() {
      this.fileDialog = true
    },
    fileCancel() {
      this.fileDialog = false
    },
    fileSubmit(filelists) {
      this.fileDialog = false
      this.model.avatar_id = filelists[0]['file_id']
      this.model.avatar_url = filelists[0]['file_url']
    },
    // 选择地区
    regionList() {
      regionList({ type: 'tree' }).then(res => {
        this.regionData = res.data
      })
    },
    regionChange(value) {
      if (value) {
        this.model.region_id = value[value.length - 1]
      }
    },
    // 删除
    dele(row) {
      if (!row.length) {
        this.selectAlert()
      } else {
        var title = '删除' + this.name
        var message = '确定要删除选中的 <span style="color:red">' + row.length + ' </span> 条' + this.name + '记录吗？'
        if (row.length === 1) {
          title = title + '：' + row[0].member_id
          message = '确定要删除' + this.name + ' <span style="color:red">' + row[0].username + ' </span>吗？'
        }
        this.$confirm(message, title, { type: 'warning', dangerouslyUseHTMLString: true }).then(() => {
          this.loading = true
          dele({
            list: row
          }).then(res => {
            this.list()
            this.$message.success(res.msg)
          }).catch(() => {
            this.loading = false
          })
        }).catch(() => {})
      }
    },
    // 重置
    reset() {
      this.model = this.$options.data().model
      if (this.$refs['ref'] !== undefined) {
        this.$refs['ref'].resetFields()
      }
    },
    // 查询
    search() {
      this.query.page = 1
      this.list()
    },
    // 刷新
    refresh() {
      this.query = this.$options.data().query
      this.list()
    },
    // 排序
    sort(sort) {
      this.query.sort_field = sort.prop
      this.query.sort_value = ''
      if (sort.order === 'ascending') {
        this.query.sort_value = 'asc'
        this.list()
      }
      if (sort.order === 'descending') {
        this.query.sort_value = 'desc'
        this.list()
      }
    },
    // 选中操作
    select(selection) {
      if (selection.length) {
        this.selectButton = true
      } else {
        this.selectButton = false
      }
      this.selection = selection
    },
    selectAlert(message = '') {
      this.$alert(message || '请选择需要操作的' + this.name, '提示', { confirmButtonText: '确定', callback: action => {} })
    },
    selectAll() {
      if (this.selectButton) {
        this.$refs.table.toggleAllSelection()
      } else {
        this.$refs.table.clearSelection()
      }
    },
    selectOpen(selectType) {
      if (!this.selection.length) {
        this.selectAlert()
      } else {
        this.selectDialog = true
        this.selectType = selectType
      }
    },
    selectCancel() {
      this.selectDialog = false
    },
    selectSubmit() {
      if (!this.selection.length) {
        this.selectAlert()
      } else {
        const type = this.selectType
        if (type === 'region') {
          this.region(this.selection, true)
        } else if (type === 'disable') {
          this.disable(this.selection, true)
        } else if (type === 'repwd') {
          this.repwd(this.selection, true)
        }
        this.selectDialog = false
      }
    },
    selectRegionChange(value) {
      if (value) {
        this.region_id = value[value.length - 1]
      }
    },
    // 设置地区
    region(row, select = false) {
      if (!row.length) {
        this.selectAlert()
      } else {
        this.loading = true
        var region_id = row[0].region_id
        if (select) {
          region_id = this.region_id
        }
        region({
          list: row,
          region_id: region_id
        }).then(res => {
          this.list()
          this.$message.success(res.msg)
        }).catch(() => {
          this.list()
        })
      }
    },
    // 是否禁用
    disable(row, select = false) {
      if (!row.length) {
        this.selectAlert()
      } else {
        this.loading = true
        var is_disable = row[0].is_disable
        if (select) {
          is_disable = this.is_disable
        }
        disable({
          list: row,
          is_disable: is_disable
        }).then(res => {
          this.list()
          this.$message.success(res.msg)
        }).catch(() => {
          this.list()
        })
      }
    },
    // 重置密码
    repwd(row, select = false) {
      if (!row.length) {
        this.selectAlert()
      } else {
        if (!this.password) {
          this.$message.error('请输入新密码')
          return false
        }
        this.loading = true
        repwd({
          list: row,
          password: this.password
        }).then(res => {
          this.list()
          this.pwdDialog = false
          this.$message.success(res.msg)
        }).catch(() => {
          this.loading = false
        })
      }
    }
  }
}
</script>
